<template>
  <u-navbar
    :is-back="false"
    back-text=""
    title="我的"
    :background="{ backgroundColor: '#FFF9E5' }"
    back-icon-size="30rpx"
    :is-fixed="true"
    title-color="#000"
    back-icon-color="#000"></u-navbar>
  <!-- <div class="mine">
    <div px-16rpx>
      <userModules :userInfo="userInfo" />
    </div>
    <div class="mine-order">
      <order ref="orderRef" />
    </div>

    <div class="mine-pin flex">
      <div
        class="pin-item"
        @click="$navigateTo(item)"
        v-for="(item, index) in pinList"
        :key="index"
      >
        <div class="pin-item-value">{{ pin[item.key] }}</div>
        <div class="pin-item-label">{{ item.label }}</div>
      </div>
    </div>
    <tools class="mine-tools" />
  </div> -->
  <view w-full box-border bg="#FFF9E5" pt-60rpx pb-80rpx>
    <view class="px-40rpx">
      <userModules :userInfo="userInfo" />
    </view>
    <view class="radar_box">
      <view class="radar_title">居家安全雷达图</view>
      <view class="content_box">
        <view class="content_left">
          <view class="content_left_info">
            <view class="content_item">
              <view class="numbers">800</view>
              <view class="num_desc">已陪伴（天）</view>
            </view>
            <view class="content_item">
              <view class="numbers">800</view>
              <view class="num_desc">战力值</view>
            </view>
          </view>
          <view class="content_left_info">
            <view class="content_item">
              <view class="numbers">800</view>
              <view class="num_desc">勋章数</view>
            </view>
            <view class="content_item">
              <view class="numbers">800</view>
              <view class="num_desc">全服排名</view>
            </view>
          </view>
          <view class="view_btn" @click="$navigateTo('/pages/gamePage/radarIndex')">
            <text>查看我的能力</text>
            <uni-icons type="right" size="16"></uni-icons>
          </view>
        </view>
        <canvas canvas-id="canvasRadar" id="canvasRadar" class="charts"></canvas>
      </view>
    </view>
    <gameModules></gameModules>
  </view>
  <view bg="#F4F4F4" mt--40rpx rounded-t-40rpx pa-40rpx>
    <!-- 手环 -->
    <view flex justify-between items-center>
      <view
        bg-white
        w-300rpx
        h-280rpx
        rounded-40rpx
        flex
        flex-col
        justify-center
        px-40rpx
        box-border
        @click="$navigateTo('/pages/ticket/myTicket?ticketCardType=2')">
        <view text-32rpx mb-28rpx font-500>我的手环</view>
        <view flex items-center>
          <image w-80rpx h-156rpx mr-20rpx src="@/static/mine/shouhuan.png"></image>
          <image w-50rpx h-70rpx src="@/static/mine/shouhuan_1.png"></image>
        </view>
      </view>
      <view h-280rpx w-350rpx flex flex-col justify-between>
        <view
          bg-white
          rounded-20rpx
          w-350rpx
          h-80rpx
          flex
          items-center
          box-border
          pl-40rpx
          text-28rpx
          @click="$navigateTo('/pages/familyMember/memberList')">
          <image w-36rpx h-30rpx mr-20rpx src="@/static/mine/jiating.png"></image>
          我的家庭
        </view>
        <view
          @click="$navigateTo('/pages/company/myCompanyList?type=2')"
          bg-white
          rounded-20rpx
          w-350rpx
          h-80rpx
          flex
          items-center
          box-border
          pl-40rpx
          text-28rpx>
          <image w-36rpx h-30rpx mr-20rpx src="@/static/mine/jiating.png"></image>
          我的学校
        </view>
        <view
          bg-white
          rounded-20rpx
          w-350rpx
          h-80rpx
          flex
          items-center
          box-border
          pl-40rpx
          text-28rpx
          @click="$navigateTo('/pages/company/myCompanyList?type=1')">
          <image w-36rpx h-30rpx mr-20rpx src="@/static/mine/danwei.png"></image>
          我的单位
        </view>
      </view>
    </view>
    <!-- 电子票 -->
    <view bg-white rounded-40rpx px-40rpx mt-40rpx>
      <view
        h-100rpx
        flex
        justify-between
        items-center
        style="border-bottom: 1px solid #eee"
        @click="$navigateTo('/pages/ticket/myTicket?ticketCardType=1')">
        <view flex items-center>
          <image w-50rpx h-50rpx mr-40rpx src="@/static/mine/dianzipiao.png"></image>
          <text text-28rpx font-500>我的电子票</text>
        </view>
        <image w-18rpx h-30rpx src="@/static/mine/right.png"></image>
      </view>
      <view h-100rpx flex justify-between items-center @click="$navigateTo('/pages/ticket/ticketOrderList')">
        <view flex items-center>
          <image w-50rpx h-50rpx mr-40rpx src="@/static/mine/goupiao.png"></image>
          <text text-28rpx font-500>购票订单</text>
        </view>
        <image w-18rpx h-30rpx src="@/static/mine/right.png"></image>
      </view>
    </view>
    <!-- 商城订单 -->
    <view bg-white rounded-40rpx pa-40rpx mt-40rpx>
      <view text-32rpx mb-30rpx font-500>商城订单</view>
      <view flex justify-between>
        <view
          v-for="(item, index) in shopOrderList"
          flex
          flex-col
          justify-center
          items-center
          @click="navigateToOrder(item)">
          <image w-60rpx h-60rpx :src="'/static/mine/order' + (index + 1) + '.png'"></image>
          <text text-24rpx mt-20rpx>{{ item.label }}</text>
        </view>
      </view>
    </view>
    <!-- 其他服务 -->
    <view bg-white rounded-40rpx px-40rpx pt-40rpx pb-20rpx mt-40rpx>
      <view text-32rpx mb-30rpx font-500 mb-20rpx>其他服务</view>
      <view v-for="item in otherServiceList" h-100rpx flex justify-between items-center @click="$navigateTo(item.url)">
        <view flex items-center>
          <image w-30rpx h-30rpx mr-20rpx :src="'/static/mine/' + item.icon + '.png'"></image>
          <text text-28rpx font-500>{{ item.label }}</text>
        </view>
        <image w-18rpx h-30rpx src="@/static/mine/right.png"></image>
      </view>
    </view>
  </view>
  <tabbar></tabbar>
</template>

<script setup lang="ts">
import { getCouponsNum, getFootprintNum, getUserWallet } from '@/api/member'
import uNavbar from '@/components/navbar/index.vue'
import userModules from '@/components/user/index.vue'
import gameModules from '@/components/user/game.vue'
import tools from '@/pages/tabbar/tools/index.vue'
import order from '@/pages/tabbar/tools/order.vue'
import { useStore } from '@/store'
import { isLogin, forceLogin } from '@/utils/filters'
import { onShow, onLoad } from '@dcloudio/uni-app'
import uCharts from '@/components/u-charts/u-charts.js'
const store = useStore()
const orderRef = ref<any>(null)
const pin = ref<any>({
  couponNum: 0,
  footNum: 0,
  walletNum: 0
})

const userInfo = ref<any>({
  face: ''
})
function getImageSrc(index: number) {
  return require(`@/static/mine/order${index + 1}.png`)
}
const shopOrderList = ref([
  {
    label: '我的订单',
    key: 'MY_ORDER'
  },
  {
    label: '待付款',
    key: 'WAIT_PAY'
  },
  {
    label: '待收货',
    key: 'WAIT_ROG'
  },
  {
    label: '待评价',
    key: 'WAIT_EVALUATE'
  },
  {
    label: '售后服务',
    key: 'REFUND'
  }
])

const navigateToOrder = (item: any) => {
  const navigateWay: any = {
    MY_ORDER: '/pages/mine/order/list',
    WAIT_PAY: '/pages/mine/order/list?tag=WAIT_PAY',
    WAIT_ROG: '/pages/mine/order/list?tag=WAIT_ROG',
    WAIT_EVALUATE: '/pages/mine/evaluation/center',
    REFUND: '/pages/mine/aftersale/list'
  }

  uni.navigateTo({
    url: navigateWay[item.key]
  })
}
const otherServiceList = ref([
  {
    label: '常用地址',
    icon: 'address',
    url: '/pages/mine/addressMine/manager?isSelect=2'
  },
  {
    label: '个人设置',
    icon: 'setting',
    url: '/pages/mine/user-detail'
  },
  {
    label: '用户反馈',
    icon: 'feedback2',
    url: '/pages/mine/feedback'
  },
  {
    label: '关于我们',
    icon: 'about',
    url: '/pages/mine/about'
  }
])

const pinList = ref([
  {
    label: '预存款',
    key: 'walletNum',
    value: 0
  },
  {
    label: '优惠券',
    key: 'couponNum',
    value: 0
  },
  {
    label: '足迹',
    key: 'footNum',
    value: 0
  }
])

// const navigateTo = (item: any) => {
//   const navigateWay: any = {
//     walletNum: '/pages/mine/wallet/balance',
//     couponNum: '/pages/mine/coupon/achieved',
//     footNum: '/pages/mine/tracks',
//     refund: '/pages/mine/aftersale/list',
//     evaluate: '/pages/mine/evaluation/center',
//     pay: '/pages/mine/tracks',
//     WAIT_PAY: '',
//     WAIT_ROG: ''
//   }

// uni.navigateTo({
//   url: navigateWay[item.key]
// })
// }
const navigateTo = (url: string) => {
  uni.navigateTo({
    url
  })
}
const radar = ref({
  categories: ['记忆力', '逻辑思维', '知识储备', '反应速度', '注意力', '视觉认知'],
  series: [{ name: '熟悉度', data: [95, 100, 80, 60, 40, 95] }]
})
const pixelRatio = ref(0.98)
const cWidth = ref(0)
const cHeight = ref(0)
const showRadar = (canvasId: any, chartData: any) => {
  console.log('开始画图')
  new uCharts({
    $this: this,
    canvasId: canvasId,
    type: 'radar',
    fontSize: 11,
    padding: [5, 5, 5, 5],
    legend: { show: false },
    colors: ['#FBC22D'],
    background: '#FFFFFF',
    pixelRatio: pixelRatio.value,
    animation: true,
    dataLabel: true,
    categories: radar.value.categories,
    series: radar.value.series,
    width: cWidth.value * pixelRatio.value,
    height: cHeight.value * pixelRatio.value,
    extra: {
      radar: {
        max: 100,
        opacity: 0.6,
        labelColor: '#A3ACBF'
      }
    }
  })
}
onLoad(() => {
  cWidth.value = uni.upx2px(440)
  cHeight.value = uni.upx2px(300)
  showRadar('canvasRadar', radar.value)
})

onShow(async () => {
  // 判断当前用户是否登录
  forceLogin()
  if (isLogin('auth')) {
    const user = await store.fetchUserInfo()
    if (user.data.success) {
      userInfo.value = user.data.result
      // Promise.all([
      //   getCouponsNum(), //优惠券
      //   getFootprintNum(), //浏览数量
      //   getUserWallet() //预存款
      // ]).then((res) => {
      //   pin.value.couponNum = res[0].data.result
      //   pin.value.footNum = res[1].data.result
      //   pin.value.walletNum = res[2].data.result.memberWallet
      // })
      // orderRef.value.init()
    }
  } else {
    userInfo.value = {}
  }
})
</script>
<style>
page {
  color: #333;
  font-weight: 400;
}

:root {
  --nut-card-left-background-color: #fff;
}
</style>
<style lang="scss" scoped>
.mine {
  padding: 32rpx 16rpx;
}

.min-recommend {
  background: #fff;
  padding: 16rpx;

  > .goods-item {
    margin: 10rpx 0;
  }
}

.flex {
  display: flex;
}

.mine-order,
.mine-pin {
  background: #fff;
  box-shadow: 6rpx 10rpx 24rpx rgba(126, 126, 126, 0.1);
  margin: 20rpx 0;
  border-radius: 24rpx;
  padding: 32rpx 16rpx;
}

.pin-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  > .pin-item-value {
    font-size: 32rpx;
    margin-bottom: 20rpx;
    font-weight: 600;
  }

  > .pin-item-label {
    font-size: 24rpx;
    font-weight: 600;
  }
}
.main {
  box-sizing: border-box;
  padding: 0 25rpx;
}

.radar_box {
  box-shadow: 0rpx 4rpx 24rpx 0rpx rgba(112, 112, 112, 0.05);
  border-radius: 40rpx;
  width: 702rpx;
  box-sizing: border-box;
  padding: 30rpx 40rpx;
  background: #fff;
  margin: 32rpx auto;

  .radar_title {
    font-size: 36rpx;
  }

  .charts {
    width: 440rpx;
    box-sizing: border-box;
    position: relative;
  }
}

.content_box {
  display: flex;
  margin-top: 30rpx;
  overflow: auto;

  .content_left {
    width: 40%;
  }

  .content_left_info {
    display: flex;
    margin-bottom: 24rpx;

    .content_item {
      width: 50%;
    }
  }

  .numbers {
    font-weight: 500;
    font-size: 36rpx;
  }

  .num_desc {
    font-size: 24rpx;
    color: #a3acbf;
  }

  .view_btn {
    width: 204rpx;
    height: 60rpx;
    background: #fbc22d;
    font-weight: 600;
    font-size: 24rpx;
    border-radius: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5rpx;

    text {
      line-height: 1;
    }
  }
}

.cup_container {
  display: flex;
  align-items: flex-end;

  text {
    &:nth-child(1) {
      line-height: 36rpx;
      margin-right: 10rpx;
    }

    &:nth-child(2) {
      font-weight: 400;
      font-size: 22rpx;
      color: #5e5e5e;
    }
  }

  .right_icon {
    margin-left: auto;
  }
}

.tab_box {
  display: flex;
  margin: 35rpx 0;

  view {
    &:nth-child(1) {
      margin-right: 20rpx;
    }
  }

  .tab_item {
    color: #a3acbf;
    background: #f7f8fc;
    border-radius: 30rpx;
    border: 1rpx solid #f7f8fc;
    box-sizing: border-box;
    padding: 8rpx 15rpx;
    font-size: 28rpx;
    line-height: 1;
  }
}

.tabActive {
  color: #2c2e3d !important;
  background: #feeebd !important;
  border: 1rpx solid #fddb7b !important;
}

.uni_swiper {
  width: 622rpx;
  height: 250rpx;
}

.uni_swiper_item {
  overflow: inherit !important;
  height: 250rpx;
}

.medal_list_box {
  width: 622rpx;
  display: flex;
  position: absolute;
  bottom: 50rpx;
}

.medal_list {
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-left: 45rpx;

  view {
    font-size: 24rpx;
  }

  .medal_icon {
    width: 142rpx;
    height: 158rpx;
  }
}
</style>
